import React from 'react'
import {useNavigate} from "react-router-dom"
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action"
import {debounce,throttle} from "lodash"
function Address() {
    const Navigate = useNavigate()
    const dispatch = useDispatch()
//   const声明的是一个常量，声明之后这个常量不可以改变，改变之后就报错了
//   let 声明的是变量，声明之后可以改变 都有块级作用域
// var 没有 ，var生命的变量整个js都可以访问
  const store = useSelector(state=>({...state.shopreducer}))
  const delfn = (index)=>{
    dispatch(action.deLFn(index))
  }
  const editfn = (item,index)=>{
      console.log(item);
      Navigate("/form",{
        state:{
          item,
          isedit:"编辑",
          editindex:index
        }
      })
  }
  console.log(store);
  return (
    <div>
        {
            store.addressarr&&  store.addressarr.length? store.addressarr.map((item,index)=>{
                return <div key={index}>
                      <p>姓名：{item.name}</p>
                      <p>住址：{item.address}</p>
                      <p>电话：{item.tel}   <button onClick={throttle(()=>{editfn(item,index)},3000,{leading:false})}>编辑</button> <button onClick={()=>{delfn(index)}}>删除</button></p>
                </div>
            }):"暂无数据"
        }
        <button onClick={debounce(()=>Navigate("/FORM",{state:{isedit:"新增"}}),3000)} >增加地址</button>
    </div>
  )
}

export default Address